<template>
  <div class="sales">
    <el-form ref="salesForm" :rules="rules" :model="form" label-width="120px" style="width:500px;padding:20px;">
      <el-form-item label="次数卡">
        <el-input placeholder="请输入卡号" v-model="form.num">
          <el-button slot="append" @click="onSearch" icon="el-icon-search"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="卡类别">
        <el-input v-if="!isSaleCard" disabled v-model="form.name"></el-input>
        <el-input v-if="isSaleCard" disabled v-model="form.name" placeholder="次卡"></el-input>
      </el-form-item>
      <el-form-item v-if="!isSaleCard" label="总次数">
        <el-input disabled v-model="form.allfrequency"></el-input>
      </el-form-item>
      <el-form-item v-if="isSaleCard" label="总次数">
        <el-input v-model="form.allfrequency"></el-input>
      </el-form-item>
      <el-form-item v-if="!isSaleCard" label="可用次数">
        <el-input disabled v-model="form.surplusfrequency"></el-input>
      </el-form-item>
      <el-form-item v-if="!isSaleCard" label="已用次数">
        <el-input disabled v-model="form.usedfrequency"></el-input>
      </el-form-item>
      <el-form-item label="操作类型">
        <el-radio-group v-model="form.radio">
          <el-radio v-for="item in form.type" :key="item.id" :label="item.id" @change="typeChange">{{item.value}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="isSaleCard" label="请选择开卡类别">
        <el-radio-group v-model="form.radioCategory">
          <el-radio v-for="item in form.category" :key="item.id" :label="item.id" @change="categoryChange">{{item.value}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      form: {
        id: '',
        num: null,
        name: '',
        radio: 1,
        radioChecked: '核销',
        type: [
          {
            id: 0,
            value: '开卡'
          },
          {
            id: 1,
            value: '核销'
          }
        ],
        radioCategory: 0,
        categoryChecked: '次卡',
        category: [
          {
            id:0,
            value: '次卡'
          },
          {
            id:1,
            value: '周卡'
          },
          {
            id:2,
            value: '月卡'
          },
          {
            id:3,
            value: '年卡'
          },
        ],
        allfrequency: '',
        usedfrequency: '',
        surplusfrequency: '',
        theme: 'card'
      },
      isSaleCard: false,
      rules: {
        num: [
          { required: true, message: '请输入卡号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '卡类名不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    typeChange() {
      var radioValue = ['开卡', '核销']
      this.form.radioChecked = radioValue[this.form.radio]
      if (this.form.radioChecked === '开卡') {
        this.isSaleCard = true
      } else {
        this.isSaleCard = false
        this.form.name = ''
        this.form.radioCategory = 0
      }
    },
    categoryChange() {
      var radioValue = ['次卡', '周卡', '月卡', '年卡']
      this.form.categoryChecked = radioValue[this.form.radioCategory]
      this.form.name = this.form.categoryChecked
    },
    onSubmit() {
      axios.post('http://127.0.0.1:8003/card-operate', this.form).then(res => {
          debugger
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.message
            })
          } else {
            this.$message({
              type: 'info',
              message: res.data.message
            })
          }
        })
    },
    onSearch() {
      let cardNum = this.form.num
      if (!cardNum) {
        this.$message({
          type: 'warning',
          message: '请输入卡号！'
        })
      } else {
        axios.get('http://127.0.0.1:8003/card-get-one', {
          params: {
            cardNum
          }
        }).then(res => {
          if (res.data.data.length > 0) {
            this.form.id = res.data.data[0].Id
            this.form.num = res.data.data[0].CardNum
            this.form.name = res.data.data[0].CardName
            this.form.allfrequency = res.data.data[0].AllFrequency
            this.form.usedfrequency = res.data.data[0].UsedFrequency
            this.form.surplusfrequency = res.data.data[0].SurplusFrequency
            this.$message({
              type: 'success',
              message: '查询成功！'
            })
          } else {
            this.$message({
              type: 'info',
              message: '此卡不存在！'
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sales {
  background-color:#fff
}
</style>
